<template>
  <el-dialog
    v-bind="$attrs"
    width="1200px"
    v-on="$listeners"
    @close="close"
    @open="open"
  >
    <template #title>
      <div class="dialogTitle">
        <span v-if="this.type === 'Terminal'">{{
          $t('flyparam.terminal') +
          ' ' +
          $t('common.import') +
          '/' +
          $t('common.export')
        }}</span>
        <span v-else-if="this.type === 'Reference'">{{
          $t('flyparam.entry') +
          ' ' +
          $t('common.import') +
          '/' +
          $t('common.export')
        }}</span>
        <span v-else>{{
          $t('flyparam.template') +
          ' ' +
          $t('common.import') +
          '/' +
          $t('common.export')
        }}</span>
      </div>
    </template>
    <el-row type="flex" align="middle" class="p-3 row" justify="space-around">
      <el-col :span="8">
        <div v-ellipsis class="text-center">
          <span
            >{{ $t('flyparam.app_name') }}:
            {{ $store.state.parameter.appName }}</span
          >
        </div>
      </el-col>
      <el-col :span="8">
        <div class="text-center">
          <el-radio-group v-model="terminalRadio" @change="handleRadioChange">
            <el-radio label="import">{{ $t('common.import') }}</el-radio>
            <el-radio label="export">{{ $t('common.export') }}</el-radio>
          </el-radio-group>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="text-center">
          <span style="margin-right: 10px">{{ $t('flyparam.mode') }}:</span>
          <el-select v-if="options.length > 1" v-model="dataMode" size="small">
            <el-option
              v-for="option in options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
          <span v-else>{{ options[0].label }}</span>
        </div>
      </el-col>
    </el-row>
    <div v-if="terminalRadio === RADIO_IMPORT">
      <terminal-import
        v-if="authorized"
        ref="import"
        v-bind="$attrs"
        :type="type"
        :table-id="tableId"
        :form-data="formData"
        :data-mode="dataMode"
        :loading-dialog-visible="loadingDialogVisible"
        @fileChange="(disabled) => (buttonDisabled = disabled)"
        @upload="handleUpload"
        @remove="handleFileRemove"
        @requesting="() => (loading = true)"
        @requested="() => handleRequested()"
        @error="() => (loading = false)"
      />
      <div v-else class="p-20 text-center">
        <h1 class="text-xl">
          Sorry, you are not authorized to use the import function
        </h1>
      </div>
    </div>
    <terminal-export
      v-else-if="terminalRadio === RADIO_EXPORT"
      ref="export"
      v-bind="$attrs"
      :type="type"
      :table-id="tableId"
      :checked-keys="checkedKeys"
      @check="handleCheck"
      @requesting="() => (loading = true)"
      @requested="() => (loading = false)"
      @error="() => (loading = false)"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="close">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          :disabled="buttonDisabled"
          @click="confirm"
          >{{ $t('common.confirm') }}</el-button
        >
      </span></template
    >
  </el-dialog>
</template>

<script>
import TerminalImport from './terminal-import.vue'
import TerminalExport from './terminal-export.vue'
import { PERMISSIONS } from '@/components/common/const'

const RADIO_IMPORT = 'import'
const RADIO_EXPORT = 'export'

export default {
  components: {
    TerminalImport,
    TerminalExport
  },
  inheritAttrs: false,
  props: {
    type: {
      type: String
    },
    tableId: {
      type: String
    },
    authorized: {
      type: Boolean,
      default: false
    },
    // 是否为简单模式
    mode: {
      type: Number
    }
  },
  data() {
    return {
      PERMISSIONS: { ...Object.freeze(PERMISSIONS.FLY_PARAM) },
      terminalRadio: RADIO_IMPORT,
      dataMode: 3,
      checkedKeys: [],
      formData: null,
      loading: false,
      buttonDisabled: true,
      RADIO_IMPORT: Object.freeze(RADIO_IMPORT),
      RADIO_EXPORT: Object.freeze(RADIO_EXPORT),
      loadingDialogVisible: false
    }
  },
  computed: {
    options() {
      if (this.type === 'Terminal' || this.type === 'Reference') {
        return [
          {
            label: this.$t('flyparam.mode_option_data_only'),
            value: 3
          }
        ]
      } else if (this.mode === 2) {
        return [
          { label: this.$t('flyparam.mode_option_structure_only'), value: 2 }
        ]
      } else {
        return [
          { label: this.$t('flyparam.mode_option_structure_data'), value: 1 },
          { label: this.$t('flyparam.mode_option_structure_only'), value: 2 },
          {
            label: this.$t('flyparam.mode_option_data_only'),
            value: 3
          }
        ]
      }
    },
    disabled() {
      return (
        (this.terminalRadio === RADIO_EXPORT &&
          this.checkedKeys.length === 0) ||
        (this.terminalRadio === RADIO_IMPORT && !this.formData)
      )
    }
  },
  mounted() {},
  methods: {
    confirm() {
      this.$refs[this.terminalRadio].confirm(this.dataMode)
    },
    open() {
      if (this.mode === 2) {
        this.dataMode = 2
      } else if (this.type !== 'Terminal' && this.type !== 'Reference') {
        this.dataMode = 1
      }
    },
    close() {
      if (this.terminalRadio === RADIO_IMPORT) {
        if (this.authorized) {
          this.$refs.import.close()
        }
        this.formData = null
      } else {
        this.$refs.export.clear()
        this.checkedKeys = []
      }
      this.terminalRadio = RADIO_IMPORT
      this.loading = false
      Object.assign(this.$data, this.$options.data())
      this.$emit('update:model-value', false)
    },
    handleCheck(keys) {
      console.log(keys)
      this.checkedKeys = keys
      this.buttonDisabled = keys.length === 0
    },
    handleRequested() {
      this.loading = false
      if (this.terminalRadio === RADIO_IMPORT) {
        if (!this.type) {
          window.location.reload()
        } else {
          this.close()
          this.$emit('requested')
        }
      }
    },
    handleRadioChange(value) {
      if (
        value === RADIO_EXPORT &&
        (this.type === 'Reference' || this.type === 'Terminal')
      ) {
        this.buttonDisabled = false
      } else {
        this.buttonDisabled = true
      }
      this.checkedKeys = []
    },
    handleUpload(file) {
      this.formData = new FormData()
      this.formData.append('file', file.raw)
    },
    handleFileRemove() {
      this.formData = null
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__body {
  padding: 0;
}

.row {
  border-bottom: 1px solid #edf2f9;
}
</style>
